import {CN,EN,Web,Cst,Action,Icon} from '../../config'
import cssText from './index.jcss'
import Plugin from '../plugin'
import Utils from '../../utils'
import VFMixin from '../vf.mixin'
const tpl = `
			<div id="#{icn.id}" data-id="#{icn.id}" data-action="#{icn.action}" class="#{icn.itemWrap}">
				<p>
					<input data-itype="function" data-defaultValue="" data-command="step.0.raw" value="#{icn.step[0].raw}" class="#{cn.input}" #{icn.state.visible?'':'disabled'}/>
					<button data-action="eyeToggle" class="#{cn.inputAddon} #{cn.r} #{cn.abtn} ${CN.iconfont} #{icn.state.visible?icn.iconeyeon:icn.iconeyeoff}">
						<input type="checkbox" data-command="state.visible" #{icn.state.visible?'checked':''}>
					</button>
				</p>
			</div>
			`
export default class FunctionPicker extends Plugin{
	constructor(...args){
		super(...args)
		this.name = "FunctionPicker"
		this.createClassName({
			root:"func-panel",
			itemWrap:"func-item-wrap"
		})
		this.injectStyle(cssText,this.cn)
		this.mixin(VFMixin)
		this.render()
		this.bind()
	}
	bind(){
		this.$dom.addEventListener("click",(e)=>{
			if(!this.active)return
			let action = e.target.dataset.action
			this[action]&&this[action](e)
		})
		this.itemsPanel.addEventListener("click",this.onItemClick.bind(this));
		["input","change"].forEach(en=>{
			this.$dom
			.addEventListener(en,(e)=>{
				if(!this.active)return
				let t = e.target
				if(t===this.input)return
				this.onEditInput.functional(this,e)
				if(t.type==="checkbox"&&e.type==="change")
					this.updateItemUi(t)
				})
		})
		this.input.addEventListener("input",(e)=>{
			this.onInput.functional(this,e)
		})
		this.input.addEventListener("change",this.onInput.bind(this))
		
		this.on(Cst.focusIn,this.onFocusIn.bind(this))	
	}
	render(){
		let cn = this.cn
		this.$dom = document.createDOM("div",{
			class:cn.root
		})
		this.$dom.innerHTML=`
			<div class="${CN.leftTopInputWrap}">
			<p>
			<input data-itype="function" spellcheck="false" class="${CN.input}"/>
			<span class="${Icon.f} ${CN.iconfont} ${CN.inputAddon} ${CN.l}"></span>
			</p>
			</div>
			<div class="${CN.leftItemsPanel}"></div>
		`
		this.input = this.$dom.query("input")
		this.itemsPanel = this.$dom.query("."+CN.leftItemsPanel)
		this.$event.emit(EN.left_layout_render,this.$dom,this.name)
	}
	onInput(e){
		if(!this.active)return
		let t = e.target
		let nvalue = t.nvalue
		let save = false
		if(!t.value)return
		if(!this.isValidFn(nvalue))return
		try{
			if(e.type==="change"){
				t.value = ""
				save = true
			}
			this.emit(EN.input_done,nvalue,save)
		}catch(e){
			console.error(e)
		}
	}
	onEditInput(e){
		if(!this.active)return
		let t = e.target
		let ds = this.isItemWrapFocus(t).dataset;
		let save = e.type==="change"
		let raw = t.nvalue
		let command = t.dataset.command
		let data={
			command,
			value: raw
		}
		let r = this.getById(ds.id)
		let path = command.split(".")
		let fn = null
		try{
			if(path[0]==="step"){
				let fnMeta = raw
				r.step[0].merge(fnMeta)
			}else if(path[0]==="state"){
				r.state.visible = raw
			}
			this.emit(EN.input_done,r,save)
		}catch(e){
			console.error(e)
		}
	}
	onFocusIn(rs){
		if(!this.active)return
		this.renderSteps(rs)
		setTimeout(()=>{
			this.input.focus()
		})
	}
	updateItemUi(t){
		let checked = t.checked
		let pNode = t.parentNode
		pNode.classList.toggle(Icon.eyeon)
		pNode.classList.toggle(Icon.eyeoff)
		pNode.previousElementSibling.disabled = !checked;
	}
	renderSteps(rs){
		this.cacheRs = rs
		this.itemsPanel.innerHTML=""
		rs.forEach(s=>{
			this.renderStepItem(s)
		})
	}
	renderStepItem(stepData){
		let cn = this.cn
		let data = 	cn.assign(cn,stepData)
		.assignPrefix(Icon,Web.iconPrefix)
		let vdom = document.createDOM("div")
			vdom.innerHTML = Utils.parseCssText(tpl,data)
		this.itemsPanel.appendChild(vdom.firstElementChild)
	}
	updateCache(r,newc){
		if(newc){
			this.cacheRs.push(r)
			this.renderStepItem(r)
			return
		}
		let index = this.cacheRs.findIndex((s)=>s.id===r.id)
		this.cacheRs[index] = r
	}
}